<template>
  <div class="allStyle">
    <el-row>
      <el-col>
        <div style="margin-bottom:20px">
          <el-input placeholder="请输入内容" v-model="value" class="input-with-select">
            <el-select style="width:100px" v-model="key" slot="prepend" placeholder="请选择">
              <el-option label="车牌" value="carnumber"></el-option>
              <el-option label="品牌" value="brank"></el-option>
              <el-option label="车型" value="type"></el-option>
            </el-select>
            <el-button @click="sureSearch" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-row class="infor-title">
      <el-col :span="4">
        <div class>车辆图片</div>
      </el-col>
      <el-col :span="4">
        <div class>车牌信息</div>
      </el-col>
      <el-col :span="4">
        <div class>车型信息</div>
      </el-col>
      <el-col :span="4">
        <div class>车辆租金</div>
      </el-col>
      <el-col :span="4">
        <div class>车辆状态</div>
      </el-col>
      <el-col :span="4">
        <div class>操作</div>
      </el-col>
    </el-row>
    <el-row class="infor-box" v-if="carsData.length == 0">
      <el-col :span="24">
          <h2 style="text-align:center;width:100%"  @click="sureSearch">开始查找车辆</h2>
      </el-col>
    </el-row>
    <el-row class="infor-box" v-for="(item,index) in carsData" :key="index">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <img class="carImg" :src="item.carImg[0]" alt />
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">{{item.carnumber}}</div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">{{item.brank}} / {{item.type}}</div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">{{item.rent}}元/天</div>
      </el-col>
      <el-col :span="4" v-if="item.checkState=='0'">
        <div v-if="item.rentalState=='0'" class="grid-content">待审核</div>
        <div v-if="item.rentalState=='2'" class="grid-content">已下架</div>
      </el-col>
      <el-col :span="4" v-if="item.checkState=='1'">
        <div v-if="item.rentalState=='0'" class="grid-content">待出租</div>
        <div v-if="item.rentalState=='1'" class="grid-content">已出租</div>
        <div v-if="item.rentalState=='2'" class="grid-content">已下架</div>
      </el-col>
      <el-col :span="4" v-if="item.checkState=='2'">
        <div class="grid-content">审核失败</div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <el-row class="btn">
            <el-button type="danger" @click="goDetail(item._id)" round>详情</el-button>
            <el-button
              v-if="item.checkState!='2'&&item.rentalState!='2'"
              type="info"
              @click="soldOut(item._id)"
              round
            >下架</el-button>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 3]"
      :page-size=" pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="allNumber"
    ></el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      key: "carnumber",
      value: "",
      carsData: [],
      pageSize: 3,
      currentPage: 1,
      allNumber: 0
    };
  },
  watch: {
    current(){
        this.currentPage=1
        this.sureSearch()
      },
      currentPage(){
        this.sureSearch()
      },
      pageSize(){
         this.sureSearch()
       }
  },
  methods: {
    goDetail(_id) {
      this.$router.push({ path: "/carDetail", query: { _id } });
    },
    soldOut(_id) {
      axios.post("/cars/changeState", { _id, rentalState: "2" }).then(res => {
        this.sureSearch();
      });
    },
    sureSearch() {
      const key = this.key;
      console.log(key)
      if (key == "carnumber") {
        axios
          .get("/cars/searchCars", {
            params: {
              carnumber: this.value,
              pageSize: this.pageSize,
              currentPage: this.currentPage
            }
          })
          .then(res => {
            this.carsData=res.data[0]
            this.allNumber=res.data[1]
          });
      }else if(key == "brank"){
          axios
          .get("/cars/searchCars", {
            params: {
              brank: this.value,
              pageSize: this.pageSize,
              currentPage: this.currentPage
            }
          })
          .then(res => {
            this.carsData=res.data[0]
            this.allNumber=res.data[1]
          });
      }else{
          axios
          .get("/cars/searchCars", {
            params: {
              type: this.value,
              pageSize: this.pageSize,
              currentPage: this.currentPage
            }
          })
          .then(res => {
              this.carsData=res.data[0]
              this.allNumber=res.data[1]
          });
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style  scoped>
.allStyle {
  color: silver;
}
.carImg {
  width: 100%;
}
.infor-box {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #dbdbdb;
}
.infor-title {
  margin-bottom: 10px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.grid-content {
  width: 180px;
  height: 120px;
  line-height: 120px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>